<template>
  <div class="did-h">
    <div class="black black-h">
      <div>创建战术链</div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/creatChain' }">战术链</el-breadcrumb-item>
        <el-breadcrumb-item>战术链创建</el-breadcrumb-item>
      </el-breadcrumb>
      <el-row :gutter="20" class="mt3">
        <el-col :span="10" :offset="6">
          <el-form label-position="right" label-width="120px" :model="form">
            <el-form-item label="战术链名称">
              <el-input v-model="form.name" placeholder="请输入战术链名称"></el-input>
            </el-form-item>
            <el-form-item label="选择战术参与者">
              <span class="demonstration"></span>
              <el-cascader :options="userListOptions" :props="userListProps" clearable @change="handleCascaderChange1"></el-cascader>
            </el-form-item>
            <el-form-item label="战术链描述">
              <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" placeholder="请输入内容" v-model="form.tacticalDescribe"> </el-input>
            </el-form-item>
            <!-- <el-form-item label="初始节点选择">
              <el-cascader :options="options" :props="cascaderProps" clearable @change="handleCascaderChange"></el-cascader>
            </el-form-item> -->
          </el-form>
        </el-col>
      </el-row>
      <div class="did-button">
        <el-button size="medium" type="primary" @click="creatTacticalChain">创建战术链</el-button>
      </div>
    </div>
  </div>
</template>
  <script>
import NoData from '../../components/noData.vue';
export default {
  created() {
    this.userDid = window.localStorage.getItem('userDid');
    this.getNodeInfo();
    this.getAllUserList();
  },
  components: {
    NoData,
  },
  data() {
    return {
      activeName: 'first',
      userDid:'',
      form: {
        did: '',
        tacticalDescribe: '',
        nodelist: '',
        name: '',
        executors:[],
      },
      data: '',
      props: { multiple: true },
      options: [],
      cascaderProps: {
        multiple: true,
        value: 'nodeId',
        label: 'nodeName',
      },
      //级联选择器1
      userListOptions: [],
      userListProps: {
        multiple: true,
        value: 'did',
        label: 'name',
      },
    };
  },
  mounted() {},
  methods: {
    //获取当前用户列表
    async getAllUserList() {
      let res = await this.$http.post(this.$api.tacticalChain.queryAllUserList);
      console.info(res);
      this.userListOptions = res;
    },
    async creatTacticalChain() {
      this.data = '';
      //当前用户DID
      const userDid = window.localStorage.getItem('userDid');
  
      this.form.executors.push(userDid);
      let formData = new FormData();
      formData.append('createUserDid', userDid);
      formData.append('tacticalDescribe', this.form.tacticalDescribe);
      formData.append('nodelist', this.form.nodelist);
      formData.append('name', this.form.name);
      formData.append('executors', this.form.executors);

      console.info(formData);
      let res = await this.$http.post(this.$api.tacticalChain.creattacticalChain, formData);
      if (res.code == 0) {
        console.info(res);
        this.$notify({
          title: '成功',
          message: '创建战术链成功',
          type: 'success'
        });
      }
    },
    //获取级联选择器的数值
    handleCascaderChange(selectedValues) {
      this.form.nodelist = selectedValues;
      console.log('Selected values:', selectedValues);
    },
    async getNodeInfo() {
      let res = await this.$http.post(this.$api.tacticalChain.queryNodeList);
      this.options = res.data;
      console.info(this.nodelist);
      if (res.code == 200) {
        console.info(res.data);
        this.options = res.data;
      }
    },
    //获取级联选择器1的数值 选择的参与用户
    handleCascaderChange1(selectedValues) {
      this.form.executors = selectedValues;
      console.log('Selected values:', selectedValues);
    },
  },
};
</script>
  <style lang="less" scoped>
.did-content {
  margin-top: 10%;
  h1 {
    color: #666666;
    width: 320px;
    margin: 0 auto;
  }
}
.did-button {
  width: 100px;
  margin: 0 auto;
  margin-top: 20px;
}
.m-a0 {
  margin: 0 auto;
}
.black-h {
  height: 50%;
}
.black-height {
  height: calc(50% - 90px);
}
.nodata {
  margin-top: 10%;
}
.did-width {
  width: 500px;
  margin: 0 auto;
}
.text-c {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
}
</style>
  